<template>
   <div class="wrapper">
			
			<!-- header部分 -->
			<header>
				<p>商家列表</p>
			</header>
			
			<!-- 商家列表部分 -->
			<ul class="business">
				<li v-for="item in businessArray" @click="toBusinessInfo(item.businessId)">
					<div class="business-img">
						<img :src="item.businessImg">
						<div class="business-img-quantity" v-show="totalQuantity(item)!=0">{{totalQuantity(item)}}</div>
					</div>
					<div class="business-info">
						<h3>{{item.businessName}}</h3>
						<p>&#165;{{item.starPrice}}起送 | &#165;{{item.deliveryPrice}}配送</p>
						<p>{{item.businessExplain}}</p>
					</div>
				</li>
			</ul>
            <!-- 底部菜单部分 -->
	        <Footer></Footer>
   </div>
</template>

<script>
import Footer from '../components/Footer.vue'
export default {
    data(){
        return {
			//获取到query中的参数
            orderTypeId:this.$route.query.orderTypeId,
			user:{},
            businessArray:[],
			cartArray:[],
			quantityArray:[]
        }
    },
	//vue初始化的方法，自动调用
    created() {
		//从sessionStorage中获取到用户的信息，如果没有此用户的信息，返回null
            this.user = this.$getSessionStorage('user');

        // 利用axios根据orderTypeId查询商家的信息
        this.$axios.post('BusinessController/listBusinessByOrderTypeId',this.$qs.stringify({
            orderTypeId:this.orderTypeId
        })).then(response=>{
            this.businessArray = response.data;
            console.log(response.data);
        }).catch(error=>{
            console.log(error)
        })

		if(this.user.userId!=null){
			// 利用axios根据userId查询购物车的信息
        this.$axios.post('CartController/listCart',this.$qs.stringify({
            userId:this.user.userId
        })).then(response=>{
            this.cartArray = response.data;
            console.log(response.data);
        }).catch(error=>{
            console.log(error)
        })
		}
		
    },
	methods:{
			//总数量
			totalQuantity(business) {
				let qtotal = 0;
				for (let cart of this.cartArray) {
					if(cart.businessId==business.businessId){
						qtotal += cart.quantity;
					}
				}
				return qtotal;
			},
		toBusinessInfo(businessId){
			//页面跳转
			this.$router.push({
                path:'/businessInfo',
                // 参数
                query:{
                    businessId:businessId
                }
            });
		}
	},
	computed:{
			
	},
    components:{
        Footer
    }
}
</script>

<style scoped>
    /****************** 总容器 ******************/
.wrapper{
	width: 100%;
	height: 100%;
}

/****************** header部分 ******************/
.wrapper header{
	width: 100%;
	height: 12vw;
	background-color: #0097FF;
	color: #fff;
	font-size: 4.8vw;
	
	position: fixed;
	left: 0;
	top: 0;
	z-index: 1000;
	
	display: flex;
	justify-content: center;
	align-items: center;
}

/****************** 商家列表部分 ******************/
.wrapper .business{
	width: 100%;
	margin-top: 12vw;
	margin-bottom: 14vw;
}
.wrapper .business li{
	width: 100%;
	box-sizing: border-box;
	padding: 2.5vw;
	border-bottom: solid 1px #DDD;
	user-select: none;
	cursor: pointer;
	
	display: flex;
	align-items: center;
}
.wrapper .business li .business-img{
	/*这里设置为相当定位，成为business-img-quantity元素的父元素*/
	position: relative;
}
.wrapper .business li .business-img img{
	width: 20vw;
	height: 20vw;
}
.wrapper .business li .business-img .business-img-quantity{
	width: 5vw;
	height: 5vw;
	background-color: red;
	color: #fff;
	font-size: 3.6vw;
	border-radius: 2.5vw;
	
	display: flex;
	justify-content: center;
	align-items: center;
	
	/*设置成绝对定位，不占文档流空间*/
	position: absolute;
	right: -1.5vw;
	top: -1.5vw;
}
.wrapper .business li .business-info{
	margin-left: 3vw;
}
.wrapper .business li .business-info h3{
	font-size: 3.8vw;
	color: #555;
}
.wrapper .business li .business-info p{
	font-size: 3vw;
	color: #888;
	margin-top: 2vw;
}
</style>